<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/info.css" rel="stylesheet">
    <link href="css/personal-center.css" rel="stylesheet">
</head>
<body>
<!-- 登录提示模态框 -->
<div class="modal fade" id="loginAlertModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">提示</h5>
            </div>
            <div class="modal-body text-center">
                <p>请先登录</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-primary" id="goToLoginBtn">前往登录</button>
            </div>
        </div>
    </div>
</div>

<!-- 顶部导航栏 -->
<div class="header">
    <div class="user-info" id="current-user">用户姓名</div>
    <a href="nor-login.html" class="nav-link">退出登录</a>
</div>

<div class="container py-5" id="mainContent" style="display:none;">
    <div class="row">
        <div class="col-md-3">
            <div class="card info-card mb-4">
                <div class="card-body text-center">
                    <h5 id="name-display">用户姓名</h5>
                    <p class="text-muted" id="role-display">普通用户</p>
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary" id="edit-btn">编辑资料</button>
                        <button class="btn btn-outline-danger d-none" id="cancel-btn">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <!-- 地址管理按钮 -->
            <div class="d-grid gap-2 d-md-flex justify-content-md-end address-btn">
                <a href="address.html" class="btn btn-primary me-md-2">
                    <i class="fas fa-map-marker-alt me-2"></i>地址管理
                </a>
            </div>

            <div class="card info-card">
                <div class="card-header">
                    <h4>个人信息</h4>
                </div>
                <div class="card-body">
                    <form id="user-info-form">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="username" class="form-label">昵称</label>
                                <input type="text" class="form-control" id="username" name="username" readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="phone" class="form-label">手机号码</label>
                                <input type="tel" class="form-control" id="phone" name="phone" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="email" class="form-label">电子邮箱</label>
                                <input type="email" class="form-control" id="email" name="email" readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="birthday" class="form-label">生日</label>
                                <input type="date" class="form-control" id="birthday" name="birthday" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">性别</label>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="sex" id="male" value="1" disabled>
                                        <label class="form-check-label" for="male">男</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="sex" id="female" value="0" disabled>
                                        <label class="form-check-label" for="female">女</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="button" class="btn btn-primary d-none" id="save-btn">保存更改</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card info-card mt-4">
                <div class="card-header">
                    <h4>安全设置</h4>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-secondary" id="change-password-btn">修改密码</button>
                        <button class="btn btn-outline-secondary" id="change-payword-btn">修改支付密码</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="passwordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="password-form">
                    <div class="mb-3">
                        <label for="current-password" class="form-label">当前密码</label>
                        <input type="password" class="form-control" id="current-password" required autocomplete="new-password">
                    </div>
                    <div class="mb-3">
                        <label for="new-password" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="new-password" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirm-password" class="form-label">确认新密码</label>
                        <input type="password" class="form-control" id="confirm-password" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-password-btn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改支付密码模态框 -->
<div class="modal fade" id="paywordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改支付密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="payword-form">
                    <div class="mb-3">
                        <label for="current-payword" class="form-label">当前支付密码</label>
                        <input type="password" class="form-control" id="current-payword" required>
                    </div>
                    <div class="mb-3">
                        <label for="new-payword" class="form-label">新支付密码</label>
                        <input type="password" class="form-control" id="new-payword" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirm-payword" class="form-label">确认新支付密码</label>
                        <input type="password" class="form-control" id="confirm-payword" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-payword-btn">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="js/info.js"></script>

</body>
</html>